<!DOCTYPE html>
<html>
	<head>
	<!--[if IE]>
		
	<![endif]-->	
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>线下服务详情页</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_mx77ygssb8en4s4i.css"/>
		<link rel="stylesheet" type="text/css" href="../swiper/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="../css/xxMall.css"/>
		<link rel="stylesheet" type="text/css" href="../css/members.css"/>
	</head>
	<style>
		.swiper-container {
		    width: 100%;
		} 
		.swiper-pagination{
			background: rgba(0,0,0,0.4);
			color: white;
			width: auto;
			left: 50%;
			transform: translateX(-50%);
			padding: 0 1rem;
			border-radius: 10px;
		}
	</style>
	<body>
		<!--
        	作者：
        	时间：2017-10-11
        	描述：轮播图
        -->
		<div class="swiper-container">
		    <div class="swiper-wrapper" id="headPic">
		        
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		</div>
		
		<div class="proTitle goodFlex mb10">
			<div class="protitCon goodCell">
				<p><span>&yen;66</span>/小时</p>
				<span>小羽家家政服务</span>
			</div>
			<em><i class="iconfont icon-heart"></i>收藏</em>
			<div class="absProcon">
				专业服务更可靠
				<i></i>
			</div>
		</div>
		
		<div class="specBox mb10">
			<p>选择规格</p>
			<ul class="specList mb10" id="specList">
				
			</ul>
			<div class="specNum">
				<input type="button" name="" id="" value="-" class="minusIpt" />
				<input type="number" name="" id="" value="1" class="numIpt" />
				<input type="button" name="" id="" value="+" class="addIpt" />
			</div>
		</div>
		
		<ul class="detailTab">
			<li class="on">详情</li>
			<li>评论</li>
		</ul>
		<div class="detailTabCon">
			<div class="proDetailcon mb10" id="introductionPics"><!--商品详情-->
			</div>
			<div class="proPingjia"><!--商品评价-->
				<div class="discussCon">
					<p class="discussP goodFlex">
						<span class="goodCell">评价 (1638)</span>
						好评度<i>98%</i> <em class="font-right-family">&gt;</em>
					</p>
					
					<div class="discussDiv">
						<div class="discussUser goodFlex">
							<span class="goodCell userImg"><img src="../images/userIcon.png"/>tu**怪</span>
							<span class="discussStar"><img src="../images/star5.png" width="100%"/></span>
						</div>
						<p class="goodTit">
							Iphone7 plus
							机身颜色：红色特别版
							128G
							官方标配
						</p>
						<p class="discussTxt">
							红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，
						</p>
						<ul class="discussPhoto">
							<li><img src="../images/colleImg02.jpg"/></li>
							<li><img src="../images/colleImg02.jpg"/></li>
							<li><img src="../images/colleImg02.jpg"/></li>
							<li><img src="../images/colleImg02.jpg"/></li>
						</ul>
					</div>
					<div class="discussDiv">
						<div class="discussUser goodFlex">
							<span class="goodCell userImg"><img src="../images/userIcon.png"/>tu**怪</span>
							<span class="discussStar"><img src="../images/star5.png" width="100%"/></span>
						</div>
						<p class="goodTit">
							Iphone7 plus
							机身颜色：红色特别版
							128G
							官方标配
						</p>
						<p class="discussTxt">
							红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，
						</p>
						<ul class="discussPhoto">
							<li><img src="../images/colleImg02.jpg"/></li>
							<li><img src="../images/colleImg02.jpg"/></li>
							<li><img src="../images/colleImg02.jpg"/></li>
							<li><img src="../images/colleImg02.jpg"/></li>
						</ul>
					</div>
					
				</div>
				<div class="moreDisscuss">
					查看全部评论
				</div>
			</div>
		</div>
		
		
		<footer class="footerBox">
			<a href="#">
				<i class="iconfont icon-kefu"></i>
				<span>客服</span>
			</a>
			<a href="#">
				<i class="iconfont icon-heart"></i>
				<span>收藏</span>
			</a>
			<a href="#" class="proBuy">
				<button>去支付</button>
			</a>
		</footer>
		<div class="" id="footerHeight"></div>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../swiper/swiper-3.4.2.min.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<script src="../js/network.js"></script>
		
		<!--轮播图-->
		<script id="headPicTmpl" type="text/x-jquery-tmpl">
			<div class="swiper-slide" id="${id}">
				<img src="${picUrl}" width="100%"/>
			</div>
		</script>
		<!--商品规格列表-->
		<script id="specTmpl" type="text/x-jquery-tmpl">
			<li class="active" id="${goodsId }">${colour}<em></em></li>
			<li>${colour}</li>
		</script>
		<!--图文介绍-->
		<script id="introductionPicsTmpl" type="text/x-jquery-tmpl">
			<img src="${picUrl}" width="100%"/>
		</script>
		<script>
			$(function(){
				var url = location.search; 
				var goodsId = getQueryString("goodsid");
				console.log(goodsId);
				
				var _url = 'offlineService/'+goodsId;
				ltNetwork.get(_url,'',function(res){
					console.log(res);
					var res = JSON.parse(res);			//字符串转换成json格式
					var data = res.data;
					var headPics = data.headPics;	//轮播图
					var details = data.details;	//规格列表 
					var introductionPics = data.introductionPics;	//图文介绍
					var goodsDetailModel = data.goodsDetailModel;	//默认规格
					$('#headPicTmpl').tmpl(headPics).appendTo('#headPic');
					
					$('#specTmpl').tmpl(details).appendTo('#specList');
					if(introductionPics.length==0){
						$('#introductionPics').html('<div align="center" style="padding: 10px 0;"><img src="../images/defaultImg.png" style="max-width: 100%;"/></div>');
					}else{
						$('#introductionPicsTmpl').tmpl(introductionPics).appendTo('#introductionPics');
					}
					
					
					
				},function(msg){
					console.log(msg);
				});
				var mySwiper = new Swiper ('.swiper-container', {
				    direction: 'horizontal',
				    loop: true,
				    autoplay:'3000',
				    autoplayDisableOnInteraction : false,	//用户操作后不会停止
				    // 如果需要分页器
				    pagination: '.swiper-pagination',
				    paginationType : 'fraction',
				  })
				
				/*
				 * 收藏
				 */
				$('.proTitle em').on('click',function(){
					$(this).toggleClass('collected');
				});
				
				/*
				 * 选择规格
				 */
				$('.specList').on('click','li',function(){
					if($(this).hasClass('active')){
						
					}else{
						$(this).addClass('active').siblings().removeClass('active');
						$(this).append('<em></em>').siblings().find('em').remove();
					}
					
				});
				
				/*
				 * 选择数量
				 */
				var productNum = (function(){
					
					var minus = function(numValue){
						
						if(numValue<=1){
							numValue =1;
						}else{
							numValue --;
						}
						$('.numIpt').val(numValue);
					};
					var addnum = function(numValue){
						
						if(numValue>=1000){
							numValue =1000;
						}else{
							numValue ++;
						}
						$('.numIpt').val(numValue);
					}
					return{
						minus:minus,
						addnum:addnum
					}
				})();
				$('.minusIpt').on('click',function(){	//数量减少
					var numValue = $('.numIpt').val();
					productNum.minus(numValue);
				});
				$('.addIpt').on('click',function(){		//数量增加
					var numValue = $('.numIpt').val();
					productNum.addnum(numValue);
				});
				
			})
			//获取底部导航条的高度，赋值给div作为占位
			var footHeight = $('.footerBox').height()+20;
			$('#footerHeight').height(footHeight);
			
			
			function getQueryString(name) {
			    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			    var r = window.location.search.substr(1).match(reg);
			    if (r != null) return unescape(r[2]); return null;
		    }
		</script>
	</body>
</html>
